<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Answer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #MainBox {
            flex: 1;
            width: 75%;
            height: 350px;
            margin: 5px auto;
        }


        #btnBox {
            width: 360px;
            height: auto;
            margin: 5px auto;
        }

        #answerlocation {
            text-align: center;
        }

        #btnBox button {
            margin: 2px 4px;
        }

        span {
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            margin: 5px 5px;
            border-radius: 3px;
        }

        #rob {
            display: flex;
            margin-top: 10px;
            text-align: center;
            grid-gap: 4px;
            box-sizing: border-box;

        }

        h1 {
            text-align: center;
            font-size: 32px;
            width: 100%;
            height: 32px;
            line-height: 32px;
            color: #01aaed;
        }

        .student {
            background-color: #00f7de;
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            justify-content: center;
            line-height: 100px;
            font-size: 18px;
        }

        .student:hover {
            cursor: pointer;
        }

        #form {
            width: 70%;
            height: 80%;
            display: flex;
        }

        #stopAnswer {
            display: none;
        }

        #getAnswerName {
            display: none;
        }
    </style>
    <!-- 引入layui css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <link href="../css/modal.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="modal" class="modal">
    <div class="modal-content">
        <header class="modal-header">
            <h4>模态框标题</h4>
            <span class="close">×</span>
        </header>
        <div class="modal-body">
            <div class="layui-form" id="form">
                <select id="select">
                    <option value="-1">请选择分数</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
        <footer class="modal-footer">
            <button id="cancel">取消</button>
            <button id="sure">确定</button>
        </footer>
    </div>
</div>


<h1>抢答功能</h1>
<div>
    <div id="MainBox">
        <div id="btnBox">
            <button class="layui-btn" id="stopAnswer">停止抢答</button>
            <button class="layui-btn" id="Answer">开始抢答</button>
            <button class="layui-btn" id="getAnswerName" onclick="showAnswered()">显示抢答姓名</button>
        </div>
    </div>
    <div id="answerlocation">
        <h2 style="color: #01aaed">已抢答学生</h2>
    </div>
    <div class="" id="rob"></div>
</div>

<script>
    window.onload = () => {
        $.ajax({
            url: '/studentRob/getStatus',
            method: 'get',
            success: (data) => {
                if (data) {
                    showAnswered();
                    $("#stopAnswer").show();
                    $("#getAnswerName").show();
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    window.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
    };
    let isSigned = false;
    $('#Answer').click(() => {
        $("#stopAnswer").show();
        $("#getAnswerName").show();
        $.ajax({
            method: 'GET',
            url: '/studentRob/startAnswer',
            success: (data) => {
                if (data.message !== undefined) {
                    alert(data.message);
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
    })

    $('#stopAnswer').click(() => {
        $.ajax({
            method: 'GET',
            url: '/studentRob/stopAnswer',
            success: (data) => {
                if (data.status) {
                    alert(data.message);
                    isSigned = false;
                } else {
                    alert(data.message);
                    window.close();
                }
            },
            complete: function (xhr) {
                if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                    alert("登陆时间过长，请重新登陆!");
                    parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        })
    })


    function showAnswered() {
        let rob = document.getElementById('rob');
        id = setInterval(() => {
            let str = '';
            if (!isSigned) {
                clearInterval(id);
            }
            $.ajax({
                method: 'GET',
                url: "/studentRob/getRob",
                async: false,
                success: (set) => {
                    if (set != null) {
                        console.log(set)
                        for (let i = 0; i < set.length; i++) {
                            str = str + '<div class="student" onclick="option(' + set[i].stuid + ')">' + set[i].name + '</div>'
                        }
                    }
                    rob.innerHTML = str;
                },
                complete: function (xhr) {
                    if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                        alert("登陆时间过长，请重新登陆!");
                        parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                    }
                }
            })
        }, 3000)
    }

    function option(e) {
        var close = document.getElementsByClassName('close')[0];
        var cancel = document.getElementById('cancel');
        var sure = document.getElementById('sure');
        var modal = document.getElementById('modal');
        modal.style.display = "block";
        close.addEventListener('click', function () {
            modal.style.display = "none";
        });
        sure.addEventListener('click', function () {
            let select = document.getElementById("select");
            let value = select.value;
            if (value !== '-1') {
                $.ajax({
                    url: '/student/alterScore',
                    method: 'get',
                    data: {
                        "stuid": e,
                        "score": value,
                    }, success: function (data) {
                        if (data) {
                            alert("加分成功")
                        } else {
                            alert("加分失败")
                        }
                    },
                    complete: function (xhr) {
                        if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                            alert("登陆时间过长，请重新登陆!");
                            parent.location.href = xhr.getResponseHeader("CONTENTPATH");
                        }
                    }
                });
                modal.style.display = "none";
            } else {
                alert('未选择分数！');
            }
        });
        cancel.addEventListener('click', function () {
            modal.style.display = "none";
        });
    }
</script>


</body>
</html>